<template>
	<div>
		<h1>OSS</h1>
		<input type="file" multiple @change="onChange" />
		<el-button @click="onUpload">上传</el-button>
		<ul>
			<li v-for="item in imgsList" :key="item.url">
				<img style="width: 50px; height: 100px;" :src="item.url" alt="" />
			</li>
		</ul>
	</div>
</template>
<script>
// multiple 上传多个文件
const OSS = require('ali-oss')

export default {
	data() {
		return {
			imgsList: [],
			client: new OSS({
				region: 'oss-cn-hangzhou',
				bucket: 'caohan-0911',
				accessKeyId: '',
				accessKeySecret: ''
			})
		}
	},
	// 接口

	// 交互
	methods: {
		// 交互
		onChange(e) {
			const files = e.target.files
			// * 只要原型上有 Symbol(Symbol.iterator). -> 就可以使用for of的统一遍历器遍历数据
			const imgArr = []
			for (let file of files) {
				console.log('file', file)
				imgArr.push(this.onUpload(file))
			}
			// * 如果要同时调用多个promise执行，可以调用两个api: Promise.all / Promise.allSettled
			Promise.all(imgArr).then((res) => {
				console.log('res:', res)
				this.imgsList = res
			})
			// 1. 将
			this.imgsList = files
		},
		// 交互 一个promise
		async onUpload(file) {
			const imgsData = await this.client.put(
				`${Math.random() * 100}_imgs`,
				file
			)
			return imgsData
		},
		// oss上传函数
		ossUpload() {}
	}
}
</script>
